<template>
  <!-- 缴费人员名单 -->
  <el-dialog class="duesUserList_dialog"
  :visible.sync="visible" title="党费缴纳详情" 
  @close="cancel" :close-on-click-modal="false" 
  :close-on-press-escape="false" :append-to-body="true"
  style="overflow: hidden;">
    <div class="duesUserList_btn">
        <el-button type="primary" @click="modify" class="jiaofei">一键已缴费</el-button>
        <el-select @change="isFeestate" v-model="isFee" clearable placeholder="是否缴费">
            <el-option v-for="item in feelist" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
    </div>
    <el-table class="duesUserList_table" height="400" border ref="multipleTable" :data="suerList"
    tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection"
        width="55"></el-table-column>
        <el-table-column label="姓名">
            <template slot-scope="scope">{{ scope.row.userName }}</template>
        </el-table-column>
        <el-table-column label="缴费时间">
            <template slot-scope="scope">{{ scope.row.feeTime }}</template>
        </el-table-column>
        <el-table-column label="是否缴费">
            <template slot-scope="scope">{{ scope.row.isFee }}</template>
        </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
    data(){
        return{
           visible:false, 
           suerList:[],//缴费用户人员名单
           isFee:"",
           feelist:[{
               id:0,
               name:"未缴费"
           },{
               id:1,
               name:"已缴费"
           }],
           feeId:"",//党费缴纳id
           userListId:[],//已选的更改缴费人员的id
        }
    },
    methods:{
        init(id){//进入弹框
            this.visible = true
            this.feeId = id
            this.isFeeList()
        },
        cancel(){//点击取消按钮
            this.visible = false
            this.isFee = ""
            this.userListId = []
        },
        handleSelectionChange(val){
            // console.log(val)
            val.forEach(item=>{
                this.userListId.push(item.userId)
            })
            // console.log(this.userListId)
        },
        isFeeList(){//获取缴费人员列表
            this.axios({
                headers:{'Authentication':localStorage.getItem('token')},
                method:"get",
                url:`/fee/getFeeStatus?feeId=${this.feeId}&isFee=${this.isFee}`,
            }).then(res=>{
                if(res.data.code != 20001){
                    return this.$message.error(res.data.msg)
                }
                this.suerList = res.data.data.list
                // console.log(this.suerList)
                this.suerList.forEach(item=>{
                    if(item.isFee==0){
                        item.isFee = "未缴费"
                    }else{
                        item.isFee = "已缴费"
                    }
                })
            })
        },
        isFeestate(e){//是否缴费下拉框
            this.isFee = e
            this.isFeeList()
        },
        modify(){//点击一键缴纳按钮
            this.$confirm('确定更改缴费状态？','提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.axios({
                    headers:{'Authentication':localStorage.getItem('token')},
                    method:"put",
                    url:`/fee/updateFeeStatus`,
                    data:{
                        "feeId": this.feeId,
                        "userIdList":this.userListId
                    }
                }).then(res=>{
                    if(res.data.code != 20001){
                        return this.$message.error(res.data.msg)
                    }
                    this.isFeeList()
                })
                this.$message({
                    type: 'success',
                    message: '更改成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                }); 
            });
        },
    }
}
</script>

<style lang="scss">
    .duesUserList_dialog{
        .duesUserList_btn{
            margin-bottom: 4vh;
            .jiaofei{
                margin-right: 1vw;
            }
        }
        .el-dialog{
            height: 79vh;
            top: -3vh;
        }
        .duesUserList_table{
            // border: 1px solid #000;
            overflow: auto;
        }
    }
</style>